<template>
	<view>
		<view style="height: 180rpx;">
			<view class="header">
				<view class="search u-p-l-30 u-p-r-30">
					<view class="address u-m-r-30">
						<u-icon name="map" color="#ffffff" size="32"></u-icon>
						<text class="city u-p-l-4">{{address}}</text>
					</view>
					<u-search placeholder="快步好货1元起购" disabled :show-action="false" @click="search"></u-search>
				</view>

				<u-sticky h5-nav-height="0" :enable="enable" bg-color="none" v-cloak>
					<u-tabs :list="categoriesList" :current="current" @change="change"
						bg-color="linear-gradient(to right, #FF6801, #FF9832)" active-color="#ffffff"
						inactive-color="#ffffff">
						<view slot="right" class="right u-p-l-24 u-p-r-24" @tap="open">
							<u-icon name="grid" size="32" color="#ffffff"></u-icon>
						</view>
					</u-tabs>
				</u-sticky>

				<view v-show="show">
					<view class="transition">
						<view class="taskBox" @click="show = false">
							<view class="listBox">
								<view class="list" v-for="(item, index) in categoriesList" :key="index"
									@tap="close(item,index)">
									{{item.name}}
								</view>
							</view>
							<u-icon name="arrow-up-fill" size="21" color="#ffffff" class="sanjiaoxing"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="current==0">
			<recommend />
		</view>
		<view v-else>
			<category :brandList="brandList" :secCateData="secCateData" :brandIndex="brandIndex"
				:secCateIndex="secCateIndex" @brandCurChange="brandCurChange" @cateCurChange="cateCurChange" />
			<u-gap height="8" bg-color="#f2f2f2"></u-gap>
			<view class="u-flex u-row-around u-p-t-20 u-p-b-20">
				<view class="u-flex" v-for="(item,index) in tabs" :key="index" @click="tabshandle(item,index)">
					<text class="u-p-r-10" :class="[active==index?'u-type-warning-dark':'']">{{item.name}}</text>
					<view class="u-flex-col" v-if="item.status">
						<u-icon name="arrow-up-fill" size="24" style="zoom: 0.7;"
							:color="item.sort_type==1?$u.color.warningDark:$u.color.defaultColor"></u-icon>
						<u-icon name="arrow-down-fill" size="24" style="zoom: 0.7;"
							:color="item.sort_type==2?$u.color.warningDark:$u.color.defaultColor"></u-icon>
					</view>
				</view>
			</view>
			<view class="product" :style="{'backgroundColor':backgroundColor}">
				<u-waterfall v-model="productList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-water" @click="toDetails(item)" v-for="(item, index) in leftList"
							:key="index">
							<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
							<u-lazy-load :image="item.mainImageUrl" threshold="50" border-radius="10"></u-lazy-load>
							<view class="demo-title">
								<u-tag v-if="item.text" class="u-m-r-10" :text="item.text" type="warning" mode="dark"
									size="mini" />
								{{item.productTitle}}
							</view>
							<view class="demo-shop">
								<text class="u-type-warning u-font-xl u-m-r-10">¥{{item.salePrice}}</text>
								<text class="" style="text-decoration: line-through;">¥{{item.productSalePrice}}</text>
							</view>
							<view class="u-flex u-row-between u-font-xs u-p-t-10">
								<text class="u-type-info">{{item.payNum}}人付款</text>
								<text class="u-type-warning">+{{item.productSalePrice}}贡献值</text>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-water" @click="toDetails(item)" v-for="(item, index) in rightList"
							:key="index">
							<u-lazy-load :image="item.mainImageUrl" threshold="50" border-radius="10"></u-lazy-load>
							<view class="demo-title">
								<u-tag v-if="item.text" class="u-m-r-10" :text="item.text" type="warning" mode="dark"
									size="mini" />
								{{item.productTitle}}
							</view>
							<view class="demo-shop">
								<text class="u-type-warning u-font-xl u-m-r-10">¥{{item.salePrice}}</text>
								<text class="" style="text-decoration: line-through;">¥{{item.productSalePrice}}</text>
							</view>
							<view class="u-flex u-row-between u-font-xs u-p-t-10">
								<text class="u-type-info">{{item.payNum}}人付款</text>
								<text class="u-type-warning">+{{item.productSalePrice}}贡献值</text>
							</view>
						</view>
					</template>
				</u-waterfall>
				<view class="u-p-30">
					<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import recommend from './components/recommend.vue'
	import category from './components/category.vue'
	export default {
		data() {
			return {
				address:'',
				
				show: false,
				enable: false,
				categoriesList: [],
				current: 0,
				parentId: 0,


				brandList: [],
				secCateData: [], //二级类目
				brandIndex: 0,
				secCateIndex: 0,

				productList: [],
				backgroundColor: {
					type: String,
					default: '#f2f2f2'
				},
				dataFrom: {
					query: '',
					query_type: '',
					page: 1,
					size: 10
				},
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '暂无数据'
				},

				tabs: [{
					name: '综合',
					status: false,
					query_type:1,
					sort_type: ''
				}, {
					name: '价格',
					status: true,
					query_type:2,
					sort_type: ''
				}, {
					name: '销量',
					status: true,
					query_type:3,
					sort_type: ''
				}],
				active: 0
			}
		},
		components: {
			recommend,
			category
		},
		onShow() {
			this.enable = true;
			this.categoriesList = []
			this.categories();
		},
		onHide() {
			this.enable = false;
		},
		onReachBottom() {
			this.dataFrom.page++;
			this.productQuery();
		},
		onLoad() {
			this.getloacation();
			
		},
		methods: {
			//选择定位
			getloacation() {
				var _this = this;
				uni.getLocation({
					type:'gcj02',
					success: (res) => {
						_this.lat = res.latitude;
						_this.lng = res.longitude;
						_this.getAdcode(res.latitude, res.longitude);
					}
				})
			},
			getAdcode(latitude, longitude) {
				var _this = this;
				var key = '914e53e8abb36cddf40df408b4e41912';
				uni.request({
					url: `https://restapi.amap.com/v3/geocode/regeo?key=${key}&&location=${longitude},${latitude}`,
					success: (res) => {
						_this.address = res.data.regeocode.addressComponent.city.length>0?res.data.regeocode.addressComponent.city:res.data.regeocode.addressComponent.province;
					}
				})
			},
			change(index) {
				this.tabs = [{
					name: '综合',
					status: false,
					query_type:1,
					sort_type: ''
				}, {
					name: '价格',
					status: true,
					query_type:2,
					sort_type: ''
				}, {
					name: '销量',
					status: true,
					query_type:3,
					sort_type: ''
				}]
				this.active=0;
				this.current = index;
				this.parentId = this.categoriesList[index].id;
				this.secCateIndex = 0;
				this.brandIndex = 0;
				this.brand();
				this.secCategories(this.categoriesList[index].id);
				if (index != 0) {
					if (this.productList.length > 0) {
						this.$refs.uWaterfall.clear()
					}
					this.dataFrom.page = 1;
					this.dataFrom.query = this.categoriesList[index].name;
					this.productQuery();
				}
			},
			productQuery() {
				this.$u.api.productQuery(this.dataFrom).then(res => {
					if (res.code == 0) {
						this.productList = [...this.productList, ...res.data];
						if (!res.data.length) {
							this.status = 'nomore';
						}
					}
				})
			},
			open() {
				this.show = !this.show;
			},
			close(item, index) {
				this.tabs = [{
					name: '综合',
					status: false,
					query_type:1,
					sort_type: ''
				}, {
					name: '价格',
					status: true,
					query_type:2,
					sort_type: ''
				}, {
					name: '销量',
					status: true,
					query_type:3,
					sort_type: ''
				}];
				this.active=0;
				this.current = index;
				this.parentId = this.categoriesList[index].id;
				this.secCateIndex = 0;
				this.brandIndex = 0;
				this.brand();
				this.secCategories(this.categoriesList[index].id);
				if (index != 0) {
					if (this.productList.length > 0) {
						this.$refs.uWaterfall.clear()
					}
					this.dataFrom.page = 1;
					this.dataFrom.query = this.categoriesList[index].name;
					this.productQuery();
				}
				this.show = false;
			},
			//搜索
			search() {
				uni.navigateTo({
					url: '/pages/search/index'
				})
			},
			//登录-退出登录
			login() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			//获取一级类目
			categories() {
				this.$u.api.categories({
					parentId: 0
				}).then(res => {
					if (res.code == 0) {
						this.categoriesList = res.data;
					}
				})
			},
			secCategories(parentId) {
				this.$u.api.categories({
					parentId: parentId
				}).then(res => {
					if (res.code == 0) {
						let len = res.data.length;
						this.secCateData = [];
						if (len > 8) {
							for (let i = 0; i < parseInt(len / 8, 10) + 1; i++) {
								this.secCateData.push(res.data.slice(i * 8, i * 8 + 8));
							}
						} else {
							this.secCateData.push(res.data)
						}
					}
				})
			},
			//获取品牌
			brand() {
				this.$u.api.brand({
					parentId: this.parentId
				}).then(res => {
					if (res.code == 0) {
						let len = res.data.length;
						this.brandList = [];
						if (len > 8) {
							for (let i = 0; i < parseInt(len / 8, 10) + 1; i++) {
								this.brandList.push(res.data.slice(i * 8, i * 8 + 8));
							}
						} else {
							this.brandList.push(res.data)
						}
					}
				})
			},
			brandCurChange(val) {
				this.brandIndex = val;
			},
			cateCurChange(val) {
				this.secCateIndex = val;
			},
			toDetails(item) {
				uni.navigateTo({
					url: '/pages/mallDetails/index?id=' + item.id
				})
			},
			tabshandle(item, index) {
				this.active = index;
				let sortType = this.tabs[index].sort_type;
				this.tabs = [{
					name: '综合',
					status: false,
					query_type:1,
					sort_type: ''
				}, {
					name: '价格',
					status: true,
					query_type:2,
					sort_type: ''
				}, {
					name: '销量',
					status: true,
					query_type:3,
					sort_type: ''
				}]
				if (sortType == '' || sortType == 2) {
					this.tabs[index].sort_type = 1
				} else {
					this.tabs[index].sort_type = 2
				}
				
				
				if (this.productList.length > 0) {
					this.$refs.uWaterfall.clear()
				}
				
				this.dataFrom.page = 1;
				this.dataFrom.query_type = item.query_type;
				this.dataFrom.sort_type = this.tabs[index].sort_type;
				this.productQuery();
			}
		}
	}
</script>

<style scoped>
	>>>.u-tabs {
		position: relative;
		padding-right: 80rpx;
	}

	>>>.u-cell-item-box {
		display: flex;
		flex-flow: wrap;
	}

	>>>.u-cell {
		width: 25%;
	}

	>>>.u-cell__value {
		position: absolute;
		top: 0;
	}

	.header {
		background: linear-gradient(to right, #FF6801, #FF9832);
	}

	.address {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		color: white;
	}

	.city {
		max-width: 120rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}

	.search {
		height: 100rpx;
		display: flex;
	}

	.right {
		position: absolute;
		top: 0;
		right: 0;
		height: 80rpx;
		display: flex;
		align-items: center;
		background: rgb(255 150 48);
	}

	.taskBox {
		position: fixed;
		background-color: rgba(0, 0, 0, 0.5);
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 1000;
	}

	.listBox {
		background-color: white;
		position: absolute;
		top: 188rpx;
		right: 10rpx;
		font-size: 28rpx;
		min-width: 200rpx;
		border-radius: 8rpx;
		overflow: scroll;
		height: 600rpx;
	}

	.list {
		text-align: center;
		line-height: 80rpx;
		border-bottom: 1px solid #f2f2f2;
		padding: 0 24rpx;

	}

	.sanjiaoxing {
		position: fixed;
		top: 172rpx;
		right: 28rpx;
	}

	.demo-water {
		border-radius: 16rpx;
		margin: 10rpx;
		background-color: #ffffff;
		position: relative;
		padding: 16rpx;
		box-shadow: 1px 1px 1px #f2f2f2;
	}

	.demo-title {
		box-sizing: border-box;
		font-size: 26rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
		color: #1a1a1a;
		margin-top: 10rpx;
		margin-bottom: 6rpx;
		padding: 0 8rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: #FF6801;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: #ccc;
		margin-top: 5px;
	}
</style>
